<template>
  <div class="product">
    <avue-crud
      
      :data="storelist.chandata"
      :option="tableOption"
      @search-change="searchs"
      @search-reset="resetChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @selection-change="selectionch"
      v-model:page="page">
      
      <template #menu-left="{}">
        <router-link to="/home/add"><el-button type="primary" color="#02A1E9" 
        icon="el-icon-plus" class="bzbtns">新增</el-button>
        </router-link>
        <el-button type="danger" @click="allDel" class="allpl">批量删除</el-button>
      </template>
      <template #status="scope">
        <el-tag v-if="scope.row.status === 0" size="small" type="danger">未上架</el-tag>
        <el-tag v-else size="small">上架</el-tag>
      </template>

      <template #menu="{ row }">
        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="hangondelete(row.prodId)">删除</el-button>
      </template>
    </avue-crud>
  </div>
</template>
<script lang='ts' setup>
import request from "../../../../utils/request";
import axios from "axios";
import { classlist } from "../../../../store/classlist";
import {get_chanlist,delchanlist,all_delete} from '../../../../api/list'
import {ref,inject, reactive} from "vue";
import { ElMessageBox,ElMessage } from 'element-plus'

const reload = inject("reload");

const page = ref({
  currentPage: 1, //当前页数
  pageSize: 10, //每页显示条目个数
  total: 0, //总条目数
});



let storelist = classlist();
const getlistdata = async (params: any) => {
  const res = await get_chanlist(params);
  console.log(res,'78777777')
  storelist.chandata = res.data.records;
  page.value.total = res.data.total;
  page.value.pageSize = res.data.size;
  page.value.currentPage = res.data.current;
};
getlistdata({ size: page.value.pageSize, current: page.value.currentPage });

// 点击每页多少条
const sizeChange = (val: number) => {
  page.value.pageSize = val;
  getlistdata({size:val})
};

//点击页码
const currentChange = (val: number) => {
  page.value.currentPage = val;
  getlistdata({current:val})
};

//搜索
const searchs = (params: any, done: any) => {
  let storelist = classlist();
   
  getlistdata(params);
  done();
};
//清空
const resetChange = () => {
  getlistdata({});
};

const tableOption = {
  border: true,
  selection: true,
  index: false,
  indexLabel: "序号",
  stripe: true,
  menuAlign: "center",
  menuWidth: 350,
  align: "center",
  refreshBtn: true,
  searchMenuSpan: 4,
  addBtn: false,
  editBtn: false,
  delBtn: false,
  viewBtn: false,
  excelBtn: true,
  expandLevel: 3,


  props: {
    label: "label",
    value: "value",
  },

  column: [
    {
      label: "产品名字",
      prop: "prodName",
      search: true,
    },
    {
      label: "商品原价",
      prop: "oriPrice",
    },
    {
      label: "商品现价",
      prop: "price",
    },
    {
      label: "商品库存",
      prop: "totalStocks",
    },
    {
      label: "产品图片",
      prop: "pic",
      type: "upload",
      width: 170,
      listType: "picture-img",
    },
    {
      width: 150,
      label: "状态",
      prop: "status",
      search: true,
      slot: true,
      type: "select",
      data: [
        {
          label: "未上架",
          value: 0,
        },
        {
          label: "上架",
          value: 1,
        },
      ],
    },
  ],
};


// 删除
const hangondelete = (id:any) => {
  ElMessageBox.confirm("确定进行删除操作？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async => {
    delchanlist([id])
    getlistdata({})
     //@ts-ignore
     reload();
      ElMessage({
        type: "success",
        message: "删除成功",
      });
  })
};

//定义删除数据
const tabDel:any=reactive({
    allTaDel:[]
})

interface User {
  prodId: string;
  prodName: string;
  oriPrice: string;
  price:string;
  brief:string;
}

const selectionch = (val:User[])=>{
    tabDel.allTaDel=[]
    val.forEach((item:any)=>{
        tabDel.allTaDel.push(item.prodId)
    })
}

// 批量删除
const allDel = async()=>{
    all_delete(tabDel.allTaDel)
     //@ts-ignore
     reload();
}


</script>

<style lang='scss' scoped>
.product {
  width: 99%;
  height: 100%;
  background: #efefef;
  margin-left: 10px;
  margin-top: 5px;
}
.bzbtns {
  margin-left: 10px;
}
.allpl{
  margin-left: 10px;
}

</style>